<template>
  <Modal v-model:visible="isShow" :title="title" :showClose="true" @close="">
    <div class="popup_body">
      <div class="game_container">
        <div
          class="game_item"
          v-for="(game, index) in gameList"
          :key="index"
          @click="handleGameClick(game)"
        >
          <img class="game_icon" :src="game.icon" />
          <div class="game_title">{{ game.name }}</div>
        </div>
      </div>
    </div>
  </Modal>

</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  close: {
    type: Function,
    required: true,
  },
});


const gameList = ref<any[]>([
  { icon: "/imgs/club/all_img.png", name: "德州PK" },
  { icon: "/imgs/club/all_img.png", name: "跑得快" },
  { icon: "/imgs/club/all_img.png", name: "21点" },
  { icon: "/imgs/club/all_img.png", name: "德州PK" },
  { icon: "/imgs/club/all_img.png", name: "跑得快" },
  { icon: "/imgs/club/all_img.png", name: "21点" },
]);

const emit = defineEmits(['update:visible', 'close']);

const title = ref('快速开始');

const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value: any) {
    emit('update:visible', value);
    emit('close');
  },
});

const handleGameClick = (game: any) => {
  console.log('游戏被点击', game);
};
</script>

<style scoped>
.popup_body {
  padding: 20px;

  .game_container {
    display: flex;
    flex-wrap: wrap;

    .game_item {
      width: 100px;
      text-align: center;
      margin: 10px 0;

      .game_icon {
        width: 50px;
        height: 50px;
      }

      .game_title {
        font-size: 14px;
        margin-top: 10px;
        color: #FFF;
        font-weight: 400;
      }
    }
  }
}
</style>
